<template>
	<view>
		
		<view style="margin-top: 40rpx;"></view>
		<view style="background-color: #fff;display: flex;align-items: flex-start;justify-content: space-between;padding: 20rpx 40rpx;box-sizing: border-box;">
			<view>
				<view style="height: 100rpx;line-height: 100rpx;font-size: 40rpx;font-weight: bold;">{{detail.goods_name}}</view>
				<view style="height: 80rpx;line-height: 80rpx;">可使用次数：{{detail.available_times - detail.occupy_times - detail.used_times}}</view>
			</view>
			<view style="">
				<image :src="detail.goods_image" style="width: 200rpx;height: 200rpx;"></image>
			</view>
		</view>
		
		<!-- SKU展示区域	 -->
		<!-- <view class="tui-cate-attr" v-if="skus && skus.length > 0">
			<view :class="['tui-cate-attr-item', sku.id == item.id ? 'tui-cate-attr-item-active' : '']" @tap="selectSkuF" 
			v-for="(item,index) in skus" 
			:key="index" :data-sku="item">
				<view class="tui-cate-attr-item-title">{{item.sku}}</view>
			</view>
		</view>	 -->
		<!-- SKU展示区域	 -->
		
		
		<view style="margin-top: 40rpx;"></view>
		<view>
			<tui-list-view>
				<tui-list-cell arrow @click="chooseAddr">
					<view class="select-address" style="display: flex;">
						<view class="slect-address-icon" style="margin-right: 20rpx;">
							<tui-icon name="gps" :size="20"></tui-icon>
						</view>
						<view clasee="select-address-text">		
							<view class="selected-address" v-if="curAddressData.address">
								<view class="selected-address-tel">
									<text>{{curAddressData.name}}（{{curAddressData.telephone}}）</text>
								</view>
								<view class="selected-address-info" style="margin-top: 20rpx;" v-if="curAddressData.city_name == curAddressData.province_name">
									<text>{{curAddressData.province_name}}{{curAddressData.district_name}}{{curAddressData.region_name}}</text>
								</view>
								<view class="selected-address-info" style="margin-top: 20rpx;" v-else>
									<text>{{curAddressData.address_default}}{{curAddressData.address}}</text>
								</view>
							</view>
							
							<view class="select-address-none" v-else>
								<text>请选择地址</text>
							</view>
						</view>
					</view>
				</tui-list-cell>
				
				<tui-list-cell arrow @click="chooseTime">
					<view class="select-service-time" style="display: flex;">
						<view class="slect-service-time-icon" style="margin-right: 20rpx;">
							<tui-icon name="time" :size="20"></tui-icon>
						</view>
						<view clasee="select-service-time-text">
							<view class="selected-service-time" v-if="servicetime">
								<text>{{servicetime}}</text>
							</view>
							<view class="select-service-time-none" v-else>
								<text>请选择期望服务时间</text>
							</view>
						</view>
					</view>
				</tui-list-cell>
			</tui-list-view>
		</view>
		
		<view style="margin-top: 40rpx;"></view>
		<view style="width: 100%; text-align: center;">
			<tui-button type="danger" style="width: 80%;margin: auto;" shape="circle" @click="sublit">提交</tui-button>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				orderId:0,
				detail:{},
				curAddressData:{},
				servicetime:'',
				// skus:[],
				// sku:{}
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.initShippingAddress()
			this.getBoutcardOrderDetail()
			this.getStorageServiceTime()
		},
		methods: {
			sublit(){
				if(this.detail.goods_id){
					let params = {
						order_id : this.orderId,
						// sku_id:this.sku.id,
						service_time : this.servicetime,
						address_id : this.curAddressData.id
					}
					this.$request.post('order.createBout',params).then(res=>{
						if(res.errno == 0 ){
							console.log(res)
							if(res.data != 1) {
								uni.showModal({
									title:'提示',
									content:res.msg,
									showCancel:false
								})
							}else{
								uni.showModal({
									title:'提示',
									content:'下单成功',
									showCancel:false,
									success:()=>{
										uni.navigateTo({
											url: "/pages/submitOrder/success?ptype=2"
										})
									}
								})
							}
						}
					})
				}
			},
			getBoutcardOrderDetail(){
				if(this.orderId){
					this.$request.post('boutcardOrder.detail',{orderid:this.orderId}).then(res=>{
						if(res.errno == 0 ){
							this.detail = res.data
							// this.getGoodsSkus()
						}
					})
				}
			},
			initShippingAddress: function() {
				var _this = this;
				_this.$request.get('address.default', {
					samkey: (new Date()).valueOf()
				}).then(res => {
					if (res.errno == 0) {
						_this.curAddressData = res.data;
					} else {
						_this.curAddressData = null;
					}
				})
			},
			getStorageServiceTime: function(){
				this.servicetime = uni.getStorageSync('servicetime');
				console.log(this.servicetime);
				
				if(this.servicetime){
					let servicetimes = this.servicetime.split(' ');
					let serviceStartTime =servicetimes[0] + ' ' + servicetimes[1].split('-')[0] + ':00';
					
					if(Date.parse(new Date(serviceStartTime)) < Date.parse(new Date())){
						this.servicetime = '';
					}
				}
			},
			chooseAddr() {
				uni.navigateTo({
					url: "/pagesA/my/address/address"
				})
			},
			chooseTime() {
				uni.navigateTo({
					url: "/pages/submitOrder/timelist"
				})
			},
			// selectSkuF(e) {
			// 	this.sku = e.currentTarget.dataset.sku;
			// 	console.log(this.sku);
			// }
		}
	}
</script>

<style>
	
	.tui-cate-attr {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		align-content:center;
		align-items:center;
		padding: 0 20rpx 20rpx 0;
	}
	.tui-cate-attr-item {
		max-width: 96%;
		min-width: 30%;
		width: 200rpx;
		height: 140rpx;
		padding: 26rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 20rpx 0 0 20rpx;
		border:solid 1rpx #ebf0f0
	}
	.tui-cate-attr-item-title{
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.tui-cate-attr-item-active {
		border-color:#e41f19;
		background-color: #ffe5e5;
		opacity: 0.6;
	}
</style>
